<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>智能万年历</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Helvetica Neue", Arial, sans-serif;
      }

      body {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        /* color: #b4a3a3; */
        min-height: 100vh;
        padding: 10px;
        position: relative;
        overflow-x: hidden;
      }

      .container {
        max-width: 1600px;
        margin: 0 auto;
        width: 100%;
      }

      header {
        text-align: center;
        padding: 10px 0;
        margin-bottom: 15px;
      }

      h1 {
        font-size: 2.5rem;
        color: #2c3e50;
        margin-bottom: 15px;
      }

      /* 浮动控件样式 */
      .floating-controls {
        position: fixed;
        top: 20px;
        right: 20px;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
        padding: 8px;
        z-index: 1000;
        cursor: move;
        user-select: none;
        transition: all 0.3s ease;
        border: 1px solid rgba(255, 255, 255, 0.3);
      }

      .floating-controls:hover {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
        transform: translateY(-2px);
      }

      .drag-handle {
        text-align: center;
        color: #999;
        font-size: 12px;
        line-height: 1;
        margin-bottom: 5px;
        cursor: grab;
        padding: 2px;
      }

      .drag-handle:active {
        cursor: grabbing;
      }

      .controls-content {
        display: flex;
        gap: 8px;
        align-items: center;
      }

      .floating-controls select,
      .floating-controls button {
        padding: 8px 12px;
        border: none;
        border-radius: 8px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        font-size: 0.9rem;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
      }

      .floating-controls select:hover,
      .floating-controls button:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
      }

      .floating-controls button {
        min-width: 40px;
        text-align: center;
        font-size: 1rem;
      }

      /* 拖拽状态样式 */
      .floating-controls.dragging {
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
        transform: scale(1.05);
        opacity: 0.9;
      }

      /* 响应式设计 */
      @media (max-width: 768px) {
        .floating-controls {
          top: 10px;
          right: 10px;
          padding: 6px;
        }

        .floating-controls select,
        .floating-controls button {
          padding: 6px 10px;
          font-size: 0.8rem;
        }

        .floating-controls button {
          min-width: 35px;
        }

        .drag-handle {
          font-size: 10px;
        }
      }

      @media (max-width: 480px) {
        .floating-controls {
          top: 5px;
          right: 5px;
          padding: 4px;
        }

        .controls-content {
          gap: 4px;
        }

        .floating-controls select,
        .floating-controls button {
          padding: 5px 8px;
          font-size: 0.75rem;
        }

        .floating-controls button {
          min-width: 30px;
        }
      }

      .calendar-container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
      }

      .month {
        background-color: white;
        border-radius: 6px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        padding: 8px;
        transition: all 0.3s ease;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -webkit-tap-highlight-color: transparent;
      }

      .month:hover,
      .month:active {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }

      /* 触摸设备特殊样式 */
      @media (hover: none) and (pointer: coarse) {
        .month:hover {
          transform: none;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .month:active {
          transform: scale(0.98);
          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        }

        .days div {
          min-height: 28px;
          padding: 5px 2px;
        }

        .year-selector select,
        .year-selector button {
          padding: 12px 18px;
          font-size: 1.1rem;
        }
      }

      /* 电脑端特殊优化 */
      @media (min-width: 1200px) {
        .calendar-container {
          grid-template-columns: repeat(4, 1fr);
          gap: 12px;
        }

        .month {
          padding: 10px;
        }

        .days div {
          font-size: 1.1rem;
          min-height: 24px;
          padding: 4px 2px;
        }

        .month-title {
          font-size: 1.2rem;
        }
      }

      .month.selected {
        box-shadow: 0 0 0 3px #e74c3c, 0 5px 15px rgba(0, 0, 0, 0.2);
      }

      .month-title {
        text-align: center;
        font-size: 1.1rem;
        color: #2c3e50;
        margin-bottom: 8px;
        padding-bottom: 5px;
        border-bottom: 1px solid #eee;
        font-weight: bold;
      }

      .weekdays {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        text-align: center;
        font-weight: bold;
        margin-bottom: 5px;
      }

      .weekdays div {
        font-size: 0.85rem;
        color: #7f8c8d;
        padding: 2px;
      }

      .days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 1px;
      }

      .days div {
        text-align: center;
        padding: 3px 1px;
        font-size: 1rem;
        border-radius: 3px;
        transition: background-color 0.2s;
        min-height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .days div.other-month {
        color: #ccc;
      }

      .days div.first-day {
        font-weight: bold;
      }

      .days div.empty-day {
        visibility: hidden;
      }

      .days div.today {
        background-color: #3498db;
        color: white;
        font-weight: bold;
      }

      .comparison-view {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.85);
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        z-index: 100;
        padding: 20px;
      }

      .comparison-view.active {
        display: flex;
      }

      .comparison-container {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: 30px;
        width: 100%;
        max-width: 1200px;
      }

      .comparison-month {
        background-color: white;
        border-radius: 10px;
        padding: 20px;
        width: 100%;
        max-width: 500px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        min-width: 300px;
      }

      .comparison-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }

      .close-btn {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: #7f8c8d;
        cursor: pointer;
        transition: color 0.3s;
      }

      .close-btn:hover {
        color: #e74c3c;
      }

      .comparison-title {
        font-size: 1.5rem;
        color: #2c3e50;
      }

      .comparison-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 8px;
      }

      .comparison-days div {
        text-align: center;
        padding: 8px;
        font-size: 1rem;
      }

      .comparison-days div.empty-day {
        visibility: hidden;
      }

      .comparison-days div.first-day {
        font-weight: bold;
      }

      .instructions {
        text-align: center;
        margin-top: 20px;
        color: #ecf0f1;
        font-size: 1.1rem;
      }

      /* 平板端优化 - 横屏 */
      @media (min-width: 768px) and (max-width: 1199px) and (orientation: landscape) {
        .calendar-container {
          grid-template-columns: repeat(4, 1fr);
          gap: 8px;
        }

        .month {
          padding: 8px;
        }

        .days div {
          font-size: 1rem;
          min-height: 22px;
          padding: 3px 1px;
        }

        .month-title {
          font-size: 1.1rem;
          margin-bottom: 6px;
        }

        .weekdays div {
          font-size: 0.85rem;
        }

        h1 {
          font-size: 2.2rem;
        }

        /* 对比视图横屏优化 */
        .comparison-container {
          flex-direction: row;
          gap: 20px;
          max-width: 100%;
          justify-content: space-around;
        }

        .comparison-month {
          max-width: 45%;
          min-width: 350px;
          padding: 16px;
        }

        .comparison-title {
          font-size: 1.3rem;
        }

        .comparison-days div {
          font-size: 1.1rem;
          padding: 6px;
        }

        .weekdays div {
          font-size: 0.9rem;
        }
      }

      /* 平板端优化 - 竖屏 */
      @media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
        .calendar-container {
          grid-template-columns: repeat(3, 1fr);
          gap: 10px;
        }

        .month {
          padding: 10px;
        }

        .days div {
          font-size: 1.05rem;
          min-height: 26px;
          padding: 4px 2px;
        }

        .month-title {
          font-size: 1.15rem;
          margin-bottom: 8px;
        }

        .weekdays div {
          font-size: 0.9rem;
        }

        h1 {
          font-size: 2.3rem;
        }

        /* 对比视图竖屏优化 */
        .comparison-container {
          flex-direction: column;
          gap: 15px;
          max-width: 90%;
          align-items: center;
        }

        .comparison-month {
          max-width: 400px;
          width: 100%;
          min-width: 300px;
          padding: 18px;
        }

        .comparison-title {
          font-size: 1.4rem;
        }

        .comparison-days div {
          font-size: 1.2rem;
          padding: 8px;
        }

        .weekdays div {
          font-size: 1rem;
          padding: 4px;
        }

        .instructions {
          font-size: 1.2rem;
          margin-top: 15px;
        }
      }

      /* 小屏幕设备 */
      @media (max-width: 767px) {
        .calendar-container {
          grid-template-columns: repeat(2, 1fr);
          gap: 6px;
        }

        h1 {
          font-size: 1.8rem;
        }

        .month {
          padding: 6px;
        }

        .days div {
          font-size: 0.9rem;
          min-height: 20px;
          padding: 2px 1px;
        }

        .month-title {
          font-size: 1rem;
          margin-bottom: 5px;
        }

        .weekdays div {
          font-size: 0.8rem;
        }

        .comparison-container {
          flex-direction: column;
          gap: 12px;
          max-width: 95%;
        }

        .comparison-month {
          max-width: 100%;
          min-width: 280px;
          padding: 12px;
        }

        .comparison-title {
          font-size: 1.2rem;
        }

        .comparison-days div {
          font-size: 1rem;
          padding: 5px 3px;
        }

        .instructions {
          font-size: 1rem;
          margin-top: 12px;
        }

        body {
          padding: 5px;
        }

        header {
          padding: 8px 0;
          margin-bottom: 10px;
        }
      }

      /* 超小屏幕设备 */
      @media (max-width: 480px) {
        .calendar-container {
          grid-template-columns: 1fr 1fr;
          gap: 4px;
        }

        h1 {
          font-size: 1.5rem;
        }

        .month {
          padding: 4px;
        }

        .days div {
          font-size: 0.85rem;
          min-height: 18px;
          padding: 1px;
        }

        .month-title {
          font-size: 0.9rem;
          margin-bottom: 4px;
        }

        .weekdays div {
          font-size: 0.75rem;
        }

        .comparison-container {
          gap: 8px;
          max-width: 98%;
        }

        .comparison-month {
          min-width: 260px;
          padding: 8px;
        }

        .comparison-title {
          font-size: 1rem;
        }

        .comparison-days div {
          font-size: 0.9rem;
          padding: 3px 2px;
        }

        .instructions {
          font-size: 0.9rem;
          margin-top: 8px;
        }
      }
    </style>
  </head>
  <body>
    <div class="container">
      <header>
        <h1>智能万年历</h1>
      </header>

      <div class="calendar-container" id="calendar-container">
        <!-- 月份日历将由JavaScript生成 -->
      </div>
    </div>

    <div class="comparison-view" id="comparison-view">
      <div class="comparison-container" id="comparison-container">
        <!-- 对比视图内容将由JavaScript生成 -->
      </div>
      <div class="instructions">
        <p>点击任意位置或关闭按钮返回全年视图</p>
      </div>
    </div>

    <!-- 浮动年份控制器 -->
    <div class="floating-controls" id="floating-controls">
      <div class="drag-handle">⋮⋮</div>
      <div class="controls-content">
        <select id="year-select">
          <!-- 年份选项将由JavaScript生成 -->
        </select>
        <button id="today-btn">📍</button>
      </div>
    </div>

    <script>
      document.addEventListener("DOMContentLoaded", function () {
        // 获取DOM元素
        const calendarContainer = document.getElementById("calendar-container");
        const yearSelect = document.getElementById("year-select");
        const todayBtn = document.getElementById("today-btn");
        const comparisonView = document.getElementById("comparison-view");
        const comparisonContainer = document.getElementById(
          "comparison-container"
        );
        const floatingControls = document.getElementById("floating-controls");

        // 浮动控件拖拽功能
        let isDragging = false;
        let dragOffset = { x: 0, y: 0 };

        function initDragDrop() {
          floatingControls.addEventListener("mousedown", startDrag);
          document.addEventListener("mousemove", drag);
          document.addEventListener("mouseup", stopDrag);

          // 触摸设备支持
          floatingControls.addEventListener("touchstart", startDragTouch, {
            passive: false,
          });
          document.addEventListener("touchmove", dragTouch, { passive: false });
          document.addEventListener("touchend", stopDrag);
        }

        function startDrag(e) {
          // 只在拖拽手柄或控件容器上开始拖拽，不在select和button上
          if (e.target.closest("select") || e.target.closest("button")) return;

          isDragging = true;
          const rect = floatingControls.getBoundingClientRect();
          dragOffset.x = e.clientX - rect.left;
          dragOffset.y = e.clientY - rect.top;
          floatingControls.style.transition = "none";
          floatingControls.classList.add("dragging");
          e.preventDefault();
        }

        function startDragTouch(e) {
          if (e.target.closest("select") || e.target.closest("button")) return;

          isDragging = true;
          const rect = floatingControls.getBoundingClientRect();
          const touch = e.touches[0];
          dragOffset.x = touch.clientX - rect.left;
          dragOffset.y = touch.clientY - rect.top;
          floatingControls.style.transition = "none";
          floatingControls.classList.add("dragging");
          e.preventDefault();
        }

        function drag(e) {
          if (!isDragging) return;

          const x = e.clientX - dragOffset.x;
          const y = e.clientY - dragOffset.y;

          // 限制在可视区域内
          const maxX = window.innerWidth - floatingControls.offsetWidth;
          const maxY = window.innerHeight - floatingControls.offsetHeight;

          const boundedX = Math.max(0, Math.min(x, maxX));
          const boundedY = Math.max(0, Math.min(y, maxY));

          floatingControls.style.left = boundedX + "px";
          floatingControls.style.top = boundedY + "px";
          floatingControls.style.right = "auto";
        }

        function dragTouch(e) {
          if (!isDragging) return;

          const touch = e.touches[0];
          const x = touch.clientX - dragOffset.x;
          const y = touch.clientY - dragOffset.y;

          const maxX = window.innerWidth - floatingControls.offsetWidth;
          const maxY = window.innerHeight - floatingControls.offsetHeight;

          const boundedX = Math.max(0, Math.min(x, maxX));
          const boundedY = Math.max(0, Math.min(y, maxY));

          floatingControls.style.left = boundedX + "px";
          floatingControls.style.top = boundedY + "px";
          floatingControls.style.right = "auto";
          e.preventDefault();
        }

        function stopDrag() {
          if (isDragging) {
            isDragging = false;
            floatingControls.style.transition = "all 0.3s ease";
            floatingControls.classList.remove("dragging");
          }
        }

        // 初始化拖拽功能
        initDragDrop();

        // 当前日期和选中的月份
        let currentDate = new Date();
        let currentYear = currentDate.getFullYear();
        let selectedMonths = [];

        // 初始化年份选择器
        function initYearSelector() {
          const startYear = 2000;
          const endYear = 2030;

          for (let year = startYear; year <= endYear; year++) {
            const option = document.createElement("option");
            option.value = year;
            option.textContent = year + "年";
            if (year === currentYear) {
              option.selected = true;
            }
            yearSelect.appendChild(option);
          }

          yearSelect.addEventListener("change", function () {
            currentYear = parseInt(this.value);
            renderCalendar();
          });
        }

        // 返回今天按钮事件
        todayBtn.addEventListener("click", function () {
          currentDate = new Date();
          currentYear = currentDate.getFullYear();
          yearSelect.value = currentYear;
          renderCalendar();
        });

        // 渲染日历
        function renderCalendar() {
          calendarContainer.innerHTML = "";
          selectedMonths = [];

          for (let month = 0; month < 12; month++) {
            const monthElement = createMonthElement(month, currentYear);
            calendarContainer.appendChild(monthElement);
          }
        }

        // 创建月份元素
        function createMonthElement(month, year) {
          const monthDiv = document.createElement("div");
          monthDiv.className = "month";
          monthDiv.dataset.month = month;

          // 月份标题
          const monthTitle = document.createElement("div");
          monthTitle.className = "month-title";
          monthTitle.textContent = `${month + 1}月`;
          monthDiv.appendChild(monthTitle);

          // 星期标题
          const weekdaysDiv = document.createElement("div");
          weekdaysDiv.className = "weekdays";
          const weekdays = ["日", "一", "二", "三", "四", "五", "六"];
          weekdays.forEach((day) => {
            const dayDiv = document.createElement("div");
            dayDiv.textContent = day;
            weekdaysDiv.appendChild(dayDiv);
          });
          monthDiv.appendChild(weekdaysDiv);

          // 日期
          const daysDiv = document.createElement("div");
          daysDiv.className = "days";

          const firstDay = new Date(year, month, 1);
          const lastDay = new Date(year, month + 1, 0);
          const daysInMonth = lastDay.getDate();
          const startingDay = firstDay.getDay();

          // 填充上个月的日期
          const prevMonthLastDay = new Date(year, month, 0).getDate();
          for (let i = 0; i < startingDay; i++) {
            const dayDiv = document.createElement("div");
            dayDiv.className = "other-month";
            dayDiv.textContent = prevMonthLastDay - startingDay + i + 1;
            daysDiv.appendChild(dayDiv);
          }

          // 填充当前月的日期
          const today = new Date();
          for (let i = 1; i <= daysInMonth; i++) {
            const dayDiv = document.createElement("div");

            // 检查是否是每月1日
            if (i === 1) {
              dayDiv.classList.add("first-day");
            }

            // 检查是否是今天
            if (
              year === today.getFullYear() &&
              month === today.getMonth() &&
              i === today.getDate()
            ) {
              dayDiv.classList.add("today");
            }

            dayDiv.textContent = i;
            daysDiv.appendChild(dayDiv);
          }

          monthDiv.appendChild(daysDiv);

          // 添加点击事件
          monthDiv.addEventListener("click", function () {
            toggleMonthSelection(this);
          });

          return monthDiv;
        }

        // 切换月份选择
        function toggleMonthSelection(monthElement) {
          const monthIndex = parseInt(monthElement.dataset.month);

          if (selectedMonths.includes(monthIndex)) {
            // 如果已经选中，取消选择
            monthElement.classList.remove("selected");
            selectedMonths = selectedMonths.filter((m) => m !== monthIndex);
          } else {
            // 如果未选中，添加选择
            if (selectedMonths.length < 2) {
              monthElement.classList.add("selected");
              selectedMonths.push(monthIndex);
            } else {
              // 如果已经选择了两个月份，先取消第一个选择，再添加新选择
              const firstSelected = document.querySelector(
                `.month[data-month="${selectedMonths[0]}"]`
              );
              firstSelected.classList.remove("selected");

              selectedMonths.shift();
              selectedMonths.push(monthIndex);

              monthElement.classList.add("selected");
            }
          }

          // 如果选择了两个月份，显示对比视图
          if (selectedMonths.length === 2) {
            showComparisonView();
          } else {
            hideComparisonView();
          }
        }

        // 显示对比视图
        function showComparisonView() {
          comparisonContainer.innerHTML = "";

          // 对选中的月份进行排序，确保按时间顺序显示
          const sortedMonths = [...selectedMonths].sort((a, b) => a - b);

          sortedMonths.forEach((monthIndex) => {
            const comparisonMonth = document.createElement("div");
            comparisonMonth.className = "comparison-month";

            // 对比视图标题栏
            const comparisonHeader = document.createElement("div");
            comparisonHeader.className = "comparison-header";

            const comparisonTitle = document.createElement("div");
            comparisonTitle.className = "comparison-title";
            comparisonTitle.textContent = `${monthIndex + 1}月`;

            comparisonHeader.appendChild(comparisonTitle);
            comparisonMonth.appendChild(comparisonHeader);

            // 星期标题
            const weekdaysDiv = document.createElement("div");
            weekdaysDiv.className = "weekdays";
            const weekdays = ["日", "一", "二", "三", "四", "五", "六"];
            weekdays.forEach((day) => {
              const dayDiv = document.createElement("div");
              dayDiv.textContent = day;
              weekdaysDiv.appendChild(dayDiv);
            });
            comparisonMonth.appendChild(weekdaysDiv);

            // 日期
            const daysDiv = document.createElement("div");
            daysDiv.className = "comparison-days";

            const firstDay = new Date(currentYear, monthIndex, 1);
            const lastDay = new Date(currentYear, monthIndex + 1, 0);
            const daysInMonth = lastDay.getDate();
            const startingDay = firstDay.getDay();

            // 填充空白格子到1号位置
            for (let i = 0; i < startingDay; i++) {
              const dayDiv = document.createElement("div");
              dayDiv.className = "empty-day";
              daysDiv.appendChild(dayDiv);
            }

            // 填充当前月的日期
            const today = new Date();
            for (let i = 1; i <= daysInMonth; i++) {
              const dayDiv = document.createElement("div");

              // 检查是否是每月1日
              if (i === 1) {
                dayDiv.classList.add("first-day");
              }

              // 检查是否是今天
              if (
                currentYear === today.getFullYear() &&
                monthIndex === today.getMonth() &&
                i === today.getDate()
              ) {
                dayDiv.classList.add("today");
              }

              dayDiv.textContent = i;
              daysDiv.appendChild(dayDiv);
            }

            comparisonMonth.appendChild(daysDiv);
            comparisonContainer.appendChild(comparisonMonth);
          });

          comparisonView.classList.add("active");
        }

        // 隐藏对比视图
        function hideComparisonView() {
          comparisonView.classList.remove("active");
        }

        // 点击对比视图背景关闭
        comparisonView.addEventListener("click", function (e) {
          if (e.target === comparisonView) {
            hideComparisonView();

            // 清除所有选择
            document.querySelectorAll(".month.selected").forEach((month) => {
              month.classList.remove("selected");
            });
            selectedMonths = [];
          }
        });

        // 初始化
        initYearSelector();
        renderCalendar();
      });
    </script>
  </body>
</html>
